import { memo, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo } from 'react'
import { Form, Input, Select, Button, Transfer, Row, Col } from 'antd'
import LdDialog from '../../../../../components/LdDialog'
import { splitOption } from '../config'
import './index.scss'
const TransferDialog = forwardRef((props: any, ref: any) => {
    const { transfer, closeVisible, insert } = props
    const formRef = useRef<any>(null)
    const [targetKeys, setTargetKeys] = useState<string[]>([])
    const [previewContent, setPreviewContent] = useState<any>('')
    const isShowPrefixed = useMemo(() => {
        return targetKeys.includes('前缀') ? true : false
    }, [targetKeys])
    const handleClose = () => {
        closeVisible && closeVisible()
    }
    const handleSubmit = () => {
        formRef.current.validateFields().then((res: any) => {
            insert && insert({
                content: previewContent,
                split: res.split,
                prefix: res.prefix
            })
            handleClose()
        }).catch((err: any) => { })
    }
    const handleChange = async (newTargetKeys: string[]) => {
        const { split = '' } = formRef.current.getFieldsValue()
        setTargetKeys(newTargetKeys)
        split ? setPreviewContent(handleSort(newTargetKeys).join(`${split}`)) : setPreviewContent(handleSort(newTargetKeys))
    }
    const handleSort = (data: string[]): any[] => {
        const sourceData = [...data]
        if (sourceData.includes('条码序号') || sourceData.includes('流水号')) {
            sourceData.map((item, index) => {
                if (item === '条码序号' || item === '流水号') {
                    sourceData.splice(index, 1)
                }
            })
        }
        if (sourceData.includes('前缀') && transfer.keyWord === "code-content") {
            sourceData.map((item, index) => {
                if (item === '前缀') {
                    sourceData.splice(index, 1)
                }
            })
            sourceData.unshift('前缀')
        }
        if (data.includes('条码序号')) {
            sourceData.push('条码序号')
        } else if (data.includes('流水号')) {
            sourceData.push('流水号')
        }
        return sourceData
    }

    const handleSplit = () => {
        const { split } = formRef.current.getFieldsValue()
        const data = handleSort([...targetKeys])
        setPreviewContent(data.join(`${split}`))
    }

    useEffect(() => {
        const { split = '', rightData, prefix } = transfer.params
        const selectedKey = rightData.map((item: string) => item)
        setTargetKeys(selectedKey)
        setPreviewContent(rightData.join(`${split}`))
        formRef.current.setFieldsValue({
            split,
            prefix
        })
    }, [])
    return (
        <>
            <LdDialog handleClose={closeVisible} title={transfer.title}>
                <>
                    <Transfer onChange={handleChange} targetKeys={targetKeys} dataSource={transfer.data} render={(item: any) => item.label} titles={['字段选择', '已选中']} className="barcode-transfer" showSearch></Transfer>
                    <Form preserve={false} ref={formRef}>
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item label="分割符" name="split" rules={[{ required: true, message: '请选择分割符' }]}>
                                    <Select onChange={handleSplit} options={splitOption} style={{ width: 'calc(100% - 5px)' }}></Select>
                                </Form.Item>
                            </Col>
                            {
                                isShowPrefixed ? <Col span={12}>
                                    <Form.Item label="前缀" name="prefix" rules={[{ required: true, message: "请输入前缀" }]}>
                                        <Input />
                                    </Form.Item>
                                </Col> : null
                            }
                        </Row>
                    </Form>
                    <div className="transfer-btn-action">
                        <div>
                            <span>预览:</span>
                            <span title={previewContent}>{previewContent}</span>
                        </div>
                    </div>
                    <div className='flex-center' style={{marginTop:'20px'}}>
                        <Button onClick={handleClose} style={{ marginRight: '10px' }}>取消</Button>
                        <Button type="primary" onClick={handleSubmit}>确定</Button>
                    </div>
                </>
            </LdDialog >
        </>
    )
})

export default memo(TransferDialog)